<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>提交书籍请求 - ZLibLike平台</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/style.css">
</head>
<body>
    <div th:replace="~{commons/header :: header}"></div>
    
    <div class="container mt-4">
        <div class="row mb-4">
            <div class="col-md-12">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="/">首页</a></li>
                        <li class="breadcrumb-item"><a href="/book-requests.html">书籍请求</a></li>
                        <li class="breadcrumb-item active">提交请求</li>
                    </ol>
                </nav>
            </div>
        </div>
        
        <div class="row">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">提交书籍请求</h3>
                    </div>
                    <div class="card-body">
                        <form id="requestForm">
                            <div class="form-group">
                                <label for="isbn">ISBN <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <input type="text" class="form-control" id="isbn" name="isbn" placeholder="请输入ISBN号码" required>
                                    <div class="input-group-append">
                                        <button class="btn btn-outline-secondary" type="button" id="checkIsbnBtn">
                                            检查
                                        </button>
                                    </div>
                                </div>
                                <small id="isbnHelp" class="form-text text-muted">国际标准书号，可在书籍封底找到</small>
                                <div id="isbnFeedback" class="invalid-feedback">
                                    请输入有效的ISBN号码
                                </div>
                                <div id="isbnExists" class="alert alert-warning mt-2 d-none">
                                    该ISBN已存在于系统中，请在<a href="/books.html" class="alert-link">书籍列表</a>中搜索
                                </div>
                            </div>
                            
                            <div class="form-group">
                                <label for="title">书籍标题 <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="title" name="title" placeholder="请输入书籍标题" required>
                            </div>
                            
                            <div class="form-group">
                                <label for="author">作者 <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="author" name="author" placeholder="请输入作者姓名" required>
                            </div>
                            
                            <div class="form-group">
                                <label for="publisher">出版社</label>
                                <input type="text" class="form-control" id="publisher" name="publisher" placeholder="请输入出版社">
                            </div>
                            
                            <div class="form-group">
                                <label for="publicationYear">出版年份</label>
                                <input type="number" class="form-control" id="publicationYear" name="publicationYear" placeholder="请输入出版年份" min="1800" max="2100">
                            </div>
                            
                            <div class="form-group">
                                <label for="language">语言</label>
                                <select class="form-control" id="language" name="language">
                                    <option value="">请选择语言</option>
                                    <option value="中文">中文</option>
                                    <option value="英文">英文</option>
                                    <option value="日文">日文</option>
                                    <option value="法文">法文</option>
                                    <option value="德文">德文</option>
                                    <option value="西班牙文">西班牙文</option>
                                    <option value="俄文">俄文</option>
                                    <option value="其他">其他</option>
                                </select>
                            </div>
                            
                            <div class="form-group">
                                <label for="reason">请求原因 <span class="text-danger">*</span></label>
                                <textarea class="form-control" id="reason" name="reason" rows="3" placeholder="请简要说明为什么需要这本书" required></textarea>
                            </div>
                            
                            <div class="form-group">
                                <label for="additionalInfo">其他信息</label>
                                <textarea class="form-control" id="additionalInfo" name="additionalInfo" rows="3" placeholder="任何额外信息，如具体版本、装帧形式等"></textarea>
                            </div>
                            
                            <div class="form-group">
                                <button type="submit" class="btn btn-primary btn-lg">提交请求</button>
                                <a href="/book-requests.html" class="btn btn-secondary btn-lg ml-2">返回列表</a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">注意事项</h4>
                    </div>
                    <div class="card-body">
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item">请确保您已经在站内搜索过，确认书籍不存在再提交请求</li>
                            <li class="list-group-item">请尽可能提供准确的ISBN，这有助于我们更快找到您需要的书籍</li>
                            <li class="list-group-item">您可以在"我的请求"页面查看请求状态</li>
                            <li class="list-group-item">管理员会尽快处理您的请求，请耐心等待</li>
                            <li class="list-group-item">被接受的请求将会排队处理，完成后会通知您</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div th:replace="~{commons/footer :: footer}"></div>
    
    <script src="/js/jquery-3.6.0.min.js"></script>
    <script src="/js/bootstrap.bundle.min.js"></script>
    <script th:inline="javascript">
        $(document).ready(function() {
            // ISBN检查
            $('#checkIsbnBtn').click(function() {
                const isbn = $('#isbn').val().trim();
                
                if (!isbn) {
                    $('#isbn').addClass('is-invalid');
                    $('#isbnFeedback').text('请输入ISBN号码');
                    return;
                }
                
                // 验证ISBN格式
                const isbnRegex = /^(?:\d[- ]?){9}[\dXx]$|^(?:\d[- ]?){12}\d$/;
                if (!isbnRegex.test(isbn)) {
                    $('#isbn').addClass('is-invalid');
                    $('#isbnFeedback').text('ISBN格式不正确');
                    return;
                }
                
                $('#isbn').removeClass('is-invalid');
                
                // 检查ISBN是否已存在
                fetch(`/api/book-requests/check-isbn?isbn=${encodeURIComponent(isbn)}`)
                    .then(response => response.json())
                    .then(data => {
                        if (data.status === 200) {
                            if (data.data) {
                                $('#isbnExists').removeClass('d-none');
                            } else {
                                $('#isbnExists').addClass('d-none');
                                $('#isbn').addClass('is-valid');
                            }
                        } else {
                            alert(data.message);
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        alert('检查ISBN失败，请稍后重试');
                    });
            });
            
            // 表单提交
            $('#requestForm').submit(function(e) {
                e.preventDefault();
                
                // 表单验证
                if (!validateForm()) {
                    return;
                }
                
                // 构建请求数据
                const requestData = {
                    isbn: $('#isbn').val().trim(),
                    title: $('#title').val().trim(),
                    author: $('#author').val().trim(),
                    publisher: $('#publisher').val().trim() || null,
                    publicationYear: $('#publicationYear').val() || null,
                    language: $('#language').val() || null,
                    reason: $('#reason').val().trim(),
                    additionalInfo: $('#additionalInfo').val().trim() || null
                };
                
                // 发送请求
                fetch('/api/book-requests', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(requestData)
                })
                .then(response => response.json())
                .then(data => {
                    if (data.status === 200) {
                        alert('请求提交成功');
                        window.location.href = '/book-requests.html';
                    } else {
                        alert(data.message);
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('请求提交失败，请稍后重试');
                });
            });
            
            // 表单验证
            function validateForm() {
                let isValid = true;
                
                // 验证ISBN
                const isbn = $('#isbn').val().trim();
                const isbnRegex = /^(?:\d[- ]?){9}[\dXx]$|^(?:\d[- ]?){12}\d$/;
                
                if (!isbn) {
                    $('#isbn').addClass('is-invalid');
                    $('#isbnFeedback').text('请输入ISBN号码');
                    isValid = false;
                } else if (!isbnRegex.test(isbn)) {
                    $('#isbn').addClass('is-invalid');
                    $('#isbnFeedback').text('ISBN格式不正确');
                    isValid = false;
                } else {
                    $('#isbn').removeClass('is-invalid');
                }
                
                // 验证标题
                const title = $('#title').val().trim();
                if (!title) {
                    $('#title').addClass('is-invalid');
                    isValid = false;
                } else {
                    $('#title').removeClass('is-invalid');
                }
                
                // 验证作者
                const author = $('#author').val().trim();
                if (!author) {
                    $('#author').addClass('is-invalid');
                    isValid = false;
                } else {
                    $('#author').removeClass('is-invalid');
                }
                
                // 验证请求原因
                const reason = $('#reason').val().trim();
                if (!reason) {
                    $('#reason').addClass('is-invalid');
                    isValid = false;
                } else {
                    $('#reason').removeClass('is-invalid');
                }
                
                return isValid;
            }
        });
    </script>
</body>
</html> 